<template>
  <div class="sort add-container">
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/attendance/work/schedule/group/list">返回</BreadcrumbItem>
        <BreadcrumbItem to="/attendance/work/schedule/group/list">考勤组管理</BreadcrumbItem>
        <BreadcrumbItem>新增考勤组</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <!-- 步骤条 -->
    <div class="steps-wrap schedule">
      <Steps :current="current">
        <Step title="选择考勤类型"></Step>
        <Step title="设置出勤日"></Step>
        <!-- <Step title="关联考勤核算规则"></Step> -->
        <Step title="选择适用员工"></Step>
      </Steps>
    </div>

    <!-- step1 -->
    <div class="step-form step-view none" :class="{block: current === 0}">
      <Form :model="formItem" :label-width="154" :rules="formRule" ref="form">
        <div class="form-item-row">
          <FormItem label="考勤组名称" class="form-item" prop="ag_name">
            <Input v-model="formItem.ag_name" placeholder="请输入" maxlength="20" class="form-input"></Input>
          </FormItem>
        </div>
        <div class="form-item-row">
          <FormItem label="工时制类型" class="form-item">标准工时</FormItem>
        </div>
        <div class="form-item-row">
          <FormItem label="考勤类型" class="form-item">
            <ul class="attendance-type">
              <li
                class="type-item"
                :class="{'type-active':attendanceTypeActiveIndex === index,'disabled':item.disabled}"
                v-for="(item, index) in attendanceType"
                :key="index"
                @click="selecteAttendanceType(index,item.disabled,item.title)"
              >
                <h3>{{item.title}}</h3>
                <p>{{item.desc}}</p>
              </li>
            </ul>
          </FormItem>
        </div>
        <!-- <div class="form-item-row form-item-row2">
          <FormItem label="考勤标准时长" class="form-item">
            <Input v-model="formItem.input" placeholder="请输入" class="form-input"></Input>
            <span class="unit">小时／天</span>
          </FormItem>
          <div class="tip">用于请假天数、请假小时数之间的折算</div>
        </div>
        <div class="form-item-row">
          <FormItem label="自动打卡" class="form-item">
            <Checkbox>下班定时自动打卡开关</Checkbox>

            <Tooltip placement="right">
              <Icon type="ios-help-circle" class="right-icon" size="18" />
              <div slot="content" class="pop-tip">
                <p>员工只要下班前在小程序上打过卡，下班时，</p>
                <p>系统就会自动帮员工打卡。</p>
              </div>
            </Tooltip>
          </FormItem>
        </div>
        <div class="form-item-row">
          <FormItem label="员工离职" class="form-item form-item2">
            <p>
              <Checkbox>员工入职当天，自动补一个上班卡</Checkbox>
            </p>
            <p>
              <Checkbox>员工离职当天，自动补一个下班卡</Checkbox>
            </p>
          </FormItem>
        </div>-->
        <!-- <div class="form-item-row">
          <FormItem label="组织代码" class="form-item">
            <Input v-model="formItem.input" placeholder="请输入" class="form-input"></Input>
          </FormItem>
        </div>-->

        <div class="form-item-row">
          <FormItem label="考勤打卡小程序" class="form-item">
            <!-- <a href>收起</a> -->
          </FormItem>
        </div>
        <div class="form-item-row">
          <FormItem label="打卡条件" class="form-item">
            <Select v-model="formItem.attendance_condition" class="form-input">
              <Option value="不使用考勤打卡小程序">不使用考勤打卡小程序</Option>
              <Option value="满足地址范围可打卡">满足地址范围可打卡</Option>
              <Option value="满足WiFi范围可打卡">满足WiFi范围可打卡</Option>
              <Option value="满足WiFi或地址中一个即可打卡">满足WiFi或地址中一个即可打卡</Option>
              <Option value="同时满足WiFi和地址范围可打卡">同时满足WiFi和地址范围可打卡</Option>
            </Select>
          </FormItem>
        </div>
        <div
          class="form-item-row"
          v-if="formItem.attendance_condition == '满足地址范围可打卡' ||  formItem.attendance_condition == '满足WiFi或地址中一个即可打卡'  ||  formItem.attendance_condition == '同时满足WiFi和地址范围可打卡'"
        >
          <FormItem label="关联打卡地址" class="form-item form-item-block">
            <div class="btn-wrap">
              <Button class="pierced mr12" @click="openAddressModal">+ 选择打卡地址</Button>
            </div>
            <div class="table-wrap mt20">
              <Table :columns="addressSelectedColumns" :data="addressSelectedList"></Table>
            </div>
          </FormItem>
        </div>
        <div
          class="form-item-row322"
          v-if="formItem.attendance_condition == '满足WiFi范围可打卡' ||  formItem.attendance_condition == '满足WiFi或地址中一个即可打卡'  ||  formItem.attendance_condition == '同时满足WiFi和地址范围可打卡'"
        >
          <FormItem label="关联打卡WiFi" class="form-item form-item-block">
            <div class="btn-wrap">
              <Button class="pierced mr12" @click="openWifiModal">+ 选择打卡WiFi</Button>
            </div>
            <div class="table-wrap mt20">
              <Table :columns="wifiSelectedColumns" :data="wifiSelectedList"></Table>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>

    <!-- step2 -->
    <div class="step-view none" :class="{block: current === 1}">
      <div class="step-section">
        <div class="title-bar">
          <div class="title">出勤日设置</div>
          <span class="title-desc">设置员工周一到周日，哪些天需要上班。若是大小周或单休，需要设置特殊日期。</span>
        </div>
        <div class="fake-table">
          <div class="f-t-header">
            <div class="f-t-h-th">工作日</div>
            <div class="f-t-h-th">当天班次</div>
            <div class="f-t-h-th">更改班次</div>
          </div>
          <!-- <div class="f-t-tr">
            <div class="t-t-tr-cell">星期一</div>
            <div class="t-t-tr-cell">早晚 09:00~18:30;</div>
            <div class="t-t-tr-cell">
              <Select v-model="formItem.select" style="width:200px">
                <Option value="beijing">休息</Option>
                <Option value="shanghai">早晚打卡</Option>
                <Option value="shenzhen">分段打卡</Option>
              </Select>
            </div>
          </div>-->
          <div class="f-t-tr" v-for="(item,index) in dayList" :key="index">
            <div class="t-t-tr-cell">{{item.day}}</div>
            <div class="t-t-tr-cell">{{item.shift}}</div>
            <div class="t-t-tr-cell">
              <Select v-model="item.shift" style="width:200px">
                <Option value="休息">休息</Option>
                <Option value="早晚 09:00~18:30;">早晚打卡</Option>
                <Option value="分段 09:00~12:00; 13:30~18:30;">分段打卡</Option>
              </Select>
            </div>
          </div>
        </div>

        <!-- label -->
        <div class="other-label">
          <p>
            <Checkbox v-model="legal_holidays">法定节假日休息</Checkbox>
          </p>
          <p class="tips">若法定节假日休息，请勾选此项；遇法定节假日有调班，请进行特殊日期设置</p>
        </div>
      </div>

      <!-- 特殊日期设置 -->
      <div class="step-section" v-if="true">
        <div class="title-bar">
          <div class="title">特殊日期设置</div>
          <span class="title-desc">如大小周或单休，需要明确哪些天是休息或上班。当有调休或调班情况时也需要设置。</span>
        </div>
        <div class="fake-table">
          <div class="f-t-header">
            <div class="f-t-h-th">日期</div>
            <div class="f-t-h-th">当天班次</div>
            <div class="f-t-h-th">更改班次</div>
            <div class="f-t-h-th action">操作</div>
          </div>

          <div class="f-t-tr" v-for="(item,index) in special_days" :key="index">
            <div class="t-t-tr-cell">{{item.date}}</div>
            <div class="t-t-tr-cell">{{item.value}}</div>
            <div class="t-t-tr-cell">
              <Select v-model="item.value" style="width:200px">
                <Option value="休息">休息</Option>
                <Option value="早晚 09:00~18:30;">早晚打卡</Option>
                <Option value="分段 09:00~12:00; 13:30~18:30;">分段打卡</Option>
              </Select>
            </div>
            <div class="t-t-tr-cell action del" @click="delSpecialDay(index)">删除</div>
          </div>
        </div>

        <!-- 添加按钮 -->
        <div class="f-t-footer">
          <Poptip placement="top-start" width="250" v-model="visible">
            <Button class="btn-font-green-border border-dashed">
              <Icon type="ios-add" size="16" />添加日期
            </Button>
            <div class="add-date" slot="content">
              <p class="add-date-item">
                <DatePicker
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  @on-change="handleDate"
                ></DatePicker>
              </p>
              <p class="add-date-item bottom-btns">
                <span class="cancle mr12" @click="cancelDate">取消</span>
                <Button class="save-btn-green" @click="saveSpecialDate">确定</Button>
              </p>
            </div>
          </Poptip>
        </div>
      </div>
      <!-- 特殊日期设置end -->
    </div>

    <!-- step3 -->
    <!-- <div class="step-view none" :class="{block: current === 2}">
      <Form :model="formItem" :label-width="154">
        <div class="form-item-row form-item-row2">
          <FormItem label="关联考勤扣款规则" class="form-item">
            <Select v-model="formItem.select" class="form-input">
              <Option value="beijing">企业默认考勤规则</Option>
            </Select>
          </FormItem>
          <div class="tip">企业不打卡人员、企业默认考勤组方案在使用</div>
        </div>
        <div class="form-item-row form-item-row2">
          <FormItem label="关联加班规则" class="form-item">
            <Select v-model="formItem.select" class="form-input">
              <Option value="beijing">企业默认加班规则</Option>
            </Select>
          </FormItem>
        </div>
        <div class="form-item-row form-item-row2">
          <FormItem label="关联补卡规则" class="form-item">
            暂无可选方案~
            <a href>去设置方案</a>
          </FormItem>
        </div>
        <div class="form-item-row form-item-row2">
          <FormItem label="关联考勤补贴规则" class="form-item">
            暂无可选方案~
            <a href>去设置方案</a>
          </FormItem>
        </div>
      </Form>
    </div>-->

    <!-- step4 -->
    <div class="step-view none" :class="{block: current === 2}">
      <Form :model="formItem" :label-width="154">
        <div class="form-item-row">
          <FormItem label="选择适用员工" class="form-item">
            <Button class="pierced mr12" @click="openSelectModal">请选择部门和员工</Button>
            <span v-if="orgNames || employeeNames ">
              您已选
              <em class="yellow" v-if="orgNames">{{orgNames}} 等部门；</em>
              <em class="yellow" v-if="employeeNames">{{employeeNames}} 等人；</em>
              <Icon
                type="md-close-circle"
                class="pointer"
                size="14"
                @click="changeAllStatus(false)"
              />
            </span>
          </FormItem>
        </div>
        <!-- <div class="form-item-row">
          <FormItem label="选择负责人" class="form-item">
            <Button class="pierced mr12" @click="openModal2">选择负责人</Button>
          </FormItem>
        </div>-->
      </Form>
    </div>

    <!-- bottom -->
    <div class="bottom-btns-wrap">
      <div class="btns">
        <!-- <Button class="mr18 default-btn">取消</Button> -->
        <Button class="pierced mr12" @click="prev" v-if="current > 0">上一步</Button>
        <Button class="save-btn-green" @click="next" v-if="current < 2">下一步</Button>
        <Button class="save-btn-green" @click="submit" v-if="current == 2">完成</Button>
      </div>
    </div>

    <Modal v-model="selectModal" width="720" class="selecte-modal">
      <p slot="header" style="font-weight:bold;">选择部门</p>
      <div class="m-c-content flex-box">
        <div class="selecte-modal-left">
          <Tabs value="name1" name="tab2">
            <TabPane label="选择部门" tab="tab2" name="name1">
              <div class="tab-content">
                <Input search placeholder="搜索员工姓名" class="search-inp" />
                <div class="s-tree">
                  <!-- <Tree :data="data2" show-checkbox></Tree> -->
                </div>
                <ul class="lately-group">
                  <!-- <div class="mark-bar"></div> -->
                  <!-- <li class="lately-item flex-box">
                      <label for>
                        <Checkbox></Checkbox>
                      </label>
                      <div class="right-info flex-box">
                        <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />行政部（2人）
                      </div>
                  </li>-->
                  <li class="lately-item flex-box">
                    <label for>
                      <Checkbox @on-change="selectAll" v-model="all">全选</Checkbox>
                    </label>
                    <div class="right-info flex-box"></div>
                  </li>
                  <li class="lately-item flex-box" v-for="(item,index) in orgList" :key="index">
                    <label for>
                      <Checkbox v-model="item.checked" @on-change="orgCheck"></Checkbox>
                    </label>
                    <div class="right-info flex-box">
                      <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
                      {{item.organization_name}}
                      <span
                      >（{{item.employee_num}}人）</span>
                    </div>
                  </li>
                  <li
                    class="lately-item flex-box"
                    v-for="(item,index) in employeeList"
                    :key="item.id"
                  >
                    <label for>
                      <Checkbox v-model="item.checked" @on-change="employeeCheck"></Checkbox>
                    </label>
                    <div class="right-info flex-box">
                      <!-- <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" /> -->
                      {{item.name}}
                    </div>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="最近选择" tab="tab2" name="name2">
              <div class="tab-content-2">
                <!-- <ul class="lately-group">
                  <div class="mark-bar"></div>
                  <li class="lately-item flex-box">
                    <label for>
                      <Checkbox></Checkbox>
                    </label>
                    <div class="right-info flex-box">
                      <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />行政部（2人）
                    </div>
                  </li>
                </ul>-->
              </div>
            </TabPane>
          </Tabs>
        </div>
        <div class="selecte-modal-right">
          <div class="s-r-header flex-box" v-if="orgNum||employeeNum">
            <div class="s-r-header-left flex-box">
              <div class="s-r-h-title mr12">已选：</div>
              <div class="s-r-h-detail">
                <span v-if="orgNum">部门{{orgNum}}个</span>
                <span v-if="orgNum && employeeNum">,</span>
                <span v-if="employeeNum">员工{{employeeNum}}人</span>
                <Icon
                  type="md-close-circle"
                  class="pointer"
                  size="14"
                  @click="changeAllStatus(false)"
                />
              </div>
            </div>
          </div>
          <div class="s-r-list">
            <!-- <div class="s-r-l-item">
                <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
                <div class="s-r-l-item-name">
                  <span class="ellipse">行政部</span>
                </div>
                <div class="close-right-icon">
                  <Icon type="md-close" />
                </div>
            </div>-->
            <div
              class="s-r-l-item"
              v-for="(item,index) in orgList"
              :key="index"
              v-if="item.checked"
            >
              <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" />
              <div class="s-r-l-item-name">
                <span class="ellipse">{{item.organization_name}}</span>
              </div>
              <div class="close-right-icon">
                <Icon type="md-close" @click="delSelect(index,'org')" />
              </div>
            </div>

            <div
              class="s-r-l-item"
              v-for="(item,index) in employeeList"
              :key="index+'z'"
              v-if="item.checked"
            >
              <!-- <Icon type="md-folder" size="30" color="#c0dffe" class="mr12" /> -->
              <div class="s-r-l-item-name">
                <span class="ellipse">{{item.name}}</span>
              </div>
              <div class="close-right-icon">
                <Icon type="md-close" @click="delSelect(index,'employee')" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <!-- <span>没有找到想要的项目？ </span>
            <span class="ml12"><a href="">去添加项目</a></span>-->
          </div>
          <div class="m-c-right">
            <Button @click="cancelSelect" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelect">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!-- wifi -->
    <Modal v-model="addressModal" width="720">
      <p slot="header" style="font-weight:bold;">选择打卡地址</p>
      <div class="m-c-content">
        <div class="f-table-wrap mb32">
          <Table
            :columns="addressColumns"
            :data="addressList"
            @on-selection-change="addressChanged"
            ref="address_selection"
          ></Table>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <span>没有找到需要的打卡地址?</span>
            <span class="ml12">
              <a href>去添加</a>
            </span>
          </div>
          <div class="m-c-right">
            <Button @click="closeModal" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelecteAddress">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <Modal v-model="wifiModal" width="720">
      <p slot="header" style="font-weight:bold;">选择打卡WiFi</p>
      <div class="m-c-content mb32">
        <div class="f-table-wrap">
          <Table
            :columns="wifiColumns"
            :data="wifiList"
            @on-selection-change="wifiChanged"
            ref="wifi_selection"
          ></Table>
        </div>
      </div>
      <div slot="footer">
        <div class="m-c-footer flex">
          <div class="m-c-left">
            <span>没有找到需要的打卡WiFi?</span>
            <span class="ml12">
              <a href>去添加</a>
            </span>
          </div>
          <div class="m-c-right">
            <Button @click="closeModal" class="no-border-btn">取消</Button>
            <Button class="save-btn-green" @click="confirmSelecteWifi">确认</Button>
          </div>
        </div>
      </div>
    </Modal>

    <!--  -->
  </div>
</template>
<script>
import { attendance, org, personnel } from "@/apis";
import http from "@/utils/http";
export default {
  data() {
    return {
      current: 0,
      selectModal: false,
      addressModal: false,
      wifiModal: false,
      leaderModal: false,
      single: true,
      formItem: {
        ag_id: "",
        ag_name: "",
        time_type: "标准工时",
        ag_type: "固定班制",
        attendance_condition: "不使用考勤打卡小程序" //打卡条件
      },
      attendanceTypeActiveIndex: 0,
      attendanceType: [
        //排班类型
        {
          title: "固定班制",
          type: 0,
          desc: "适用于员工每天的上下班时间相同的企业，如双休/单休，朝九晚六等"
        },
        {
          title: "排班制",
          type: 1,
          desc: "员工工作日不固定，按排班表出勤",
          disabled: false
        },
        {
          title: "弹性制-自由上下班",
          type: 2,
          desc: "适用于不确定上下班时间的员工",
          disabled: false
        },
        {
          title: "不打卡",
          type: 3,
          desc: "员工上下班无需打卡，但需要记录请假等，如长期外勤人员",
          disabled: false
        }
      ],

      dayList: [
        // 每周列表
        {
          day: "星期一",
          eng_name: "ag_mon",
          shift: "休息"
        },
        {
          day: "星期二",
          eng_name: "ag_tue",
          shift: "休息"
        },
        {
          day: "星期三",
          eng_name: "ag_wed",
          shift: "休息"
        },
        {
          day: "星期四",
          eng_name: "ag_thu",
          shift: "休息"
        },
        {
          day: "星期五",
          eng_name: "ag_fri",
          shift: "休息"
        },
        {
          day: "星期六",
          eng_name: "ag_sat",
          shift: "休息"
        },
        {
          day: "星期日",
          eng_name: "ag_sun",
          shift: "休息"
        }
      ],
      addressSelectedColumns: [
        {
          title: "考勤地址",
          key: "ci_place"
        },
        {
          title: " ",
          key: "ci_address"
        },
        {
          title: "操作",
          key: "address",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  class: "table-action-btn del",
                  on: {
                    click: () => {
                      this.deleteAddress(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      wifiSelectedColumns: [
        {
          title: "Wi-Fi名称",
          key: "wifi_name"
        },
        {
          title: "MAC地址",
          key: "wifi_mac"
        },
        {
          title: "操作",
          key: "address",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  class: "table-action-btn del",
                  on: {
                    click: () => {
                      this.deleteWifi(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      addressColumns: [
        {
          title: "打卡地址",
          key: "ci_place",
          type: "selection"
        },
        {
          title: "具体地址",
          key: "ci_address"
        },
        {
          title: "可打卡范围",
          key: "ci_scope"
        }
      ],
      wifiColumns: [
        {
          title: " ",
          type: "selection",
          width: 40
        },
        {
          title: "Wi-Fi名称",
          key: "wifi_name"
        },
        {
          title: "MAC地址",
          key: "wifi_mac"
        }
      ],
      addressList: [], //所有的地址列表
      addressSelectedList: [], //已经选择的地址
      wifiList: [], //所有的wifi地址列表
      wifiSelectedList: [], //已经选择的wifi列表
      special_days: [], // 特殊日期
      legal_holidays: false, // 是否法定节假日休息
      selecteDate: "", // 选择的日期
      visible: false, // 控制选择日期的弹框
      employee_ids: "", // 选择适用员工
      leader_id: "", // 选择负责人
      organization_ids: "", //选择适用组织
      employeeSelectList: [], //选择的员工，
      orgSelecteList: [], //选择的组织
      orgList: [], //组织列表
      employeeList: [], // 员工列表
      orgNum: 0, //已经选择的部门或者组织数
      employeeNum: 0, //已经选择的员工数
      orgNames: "", //确认选择的组织或者部门名字，用于展示
      employeeNames: "", //确认选择的员工的名字，用于展示
      all: false, //选择适用员工或者部门，是否全选,
      addressSelectedTemp: [], //address选择临时
      wifiSelectedTemp: [], //wifi选择临时
      formRule: {
        ag_name: [
          { required: true, message: "请输入考勤组名称", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    selecteAttendanceType(index, b, title) {
      if (!b) {
        this.attendanceTypeActiveIndex = index;
        this.formItem.ag_type = title;
      }
    },
    next() {
      if (this.current == 0) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.current += 1;
          } else {
            // this.$Message.error('Fail!');
          }
        });
      } else if (this.current == 1) {
        this.current += 1;
      }
    },
    prev() {
      if (this.current == 0) {
        this.current = 0;
      } else {
        this.current -= 1;
      }
    },
    saveSpecialDate() {
      if (this.selecteDate) {
        let data = {
          date: this.selecteDate,
          value: "休息"
        };
        this.special_days.push(data);
        this.cancelDate(); // 关闭选择框
      }
    },
    addressChanged(e) {
      // adress 选择
      this.addressSelectedTemp = e;
    },
    wifiChanged(e) {
      // wifi 选择
      this.wifiSelectedTemp = e;
    },
    handleDate(e) {
      this.selecteDate = e;
    },

    cancelDate() {
      //取消选择日期
      this.visible = false;
    },
    confirmSelecteAddress() {
      // 选择地址，确认
      this.$set(this.addressSelectedList, this.addressSelectedTemp);
      // this.$refs.address_selection.selectAll(false);
      this.closeModal();
    },
    confirmSelecteWifi() {
      // 选择wifi，确认
      console.log(222);
      this.wifiSelectedList = this.wifiSelectedTemp;
      // this.$set(this.wifiSelectedList,this.wifiSelectedTemp);
      this.$refs.wifi_selection.selectAll(false);
      this.closeModal();
    },
    delSpecialDay(index) {
      //删除特殊日期
      this.special_days.splice(index, 1);
    },
    openWifiModal() {
      this.wifiModal = true;
    },
    openSelectModal() {
      //选择适用员工弹框
      this.selectModal = true;
    },
    closeModal() {
      this.selectModal = false;
      this.leaderModal = false;
      this.addressModal = false;
      this.wifiModal = false;
    },
    openModal2() {
      //选择负责人弹框
    },

    ok() {},
    deleteAddress(e) {
      // 删除地址
      this.addressSelectedList.splice(e.index, 1);
    },
    deleteWifi(e) {
      // 删除wifi
      this.wifiSelectedList.splice(e.index, 1);
    },
    cancelSelect() {
      this.selectModal = false;
    },

    confirmSelect() {
      //保存

      let org = [];
      let orgNames = [];
      let employeeNames = [];
      let employee = [];
      this.orgList.forEach(e => {
        if (e.checked) {
          org.push(e.organization_id);
          orgNames.push(e.organization_name);
        }
      }),
        this.employeeList.forEach(e => {
          if (e.checked) {
            employee.push(e.employee_id);
            employeeNames.push(e.name);
          }
        });

      if (org.length) {
        this.organization_ids = org.join(",");
        this.orgNames = orgNames.slice(0, 3).join("、");
      }
      if (employee.length) {
        this.employee_ids = employee.join(",");
        this.employeeNames = employeeNames.slice(0, 3).join("、");
      }

      if (!org.length && !employee.length) {
        this.$Message.error("请选择适用的员工或部门！");
        return;
      }
      this.closeModal();
    },

    delSelect(index, type) {
      if (type == "org") {
        this.orgList[index].checked = false;
        this.updateOrgNum();
      } else {
        this.employeeList[index].checked = false;
        this.updateEmployeeNum();
      }
    },
    openAddressModal() {
      this.addressModal = true;
    },
    getOrgList(ids) {
      http.get(org.organizationlist).then(res => {
        let list = res.data.list || [];
        if (ids) {
          ids.forEach(e => {
            list.forEach(m => {
              m.checked = m.organization_id == e;
            });
          });
          this.orgList = list;
          this.confirmSelect();
        } else {
          list.forEach(e => {
            e.checked = false;
          });
          this.orgList = list;
        }
        
      });
    },

    getEmployeeList(ids) {
      http.get(personnel.employeelist).then(res => {
        let list = res.data.list.data || [];
        if (ids) {
          ids.forEach(e => {
            list.forEach(m => {
              m.checked = m.employee_id == e;
            });
          });
          this.employeeList = list;
          this.confirmSelect();
        } else {
          list.forEach(e => {
            e.checked = false;
          });
          this.employeeList = list;
        }
        
      });
    },



    employeeCheck(e) {
      //选择员工
      this.updateEmployeeNum();
    },

    orgCheck(e, index) {
      //选择组织
      console.log(e);
      this.updateOrgNum();
    },
    changeAllStatus(type) {
      //清除或者全选
      this.orgList.forEach(e => {
        e.checked = type;
      });
      this.employeeList.forEach(e => {
        e.checked = type;
      });

      // 更新数据
      this.updateOrgNum();
      this.updateEmployeeNum();
      if (!type) {
        this.orgNames = "";
        this.employeeNames = "";
        this.all = false;
      }
    },
    selectAll(e) {
      this.all = e;
      this.changeAllStatus(e);
    },
    updateOrgNum() {
      let num = 0;
      this.orgList.forEach(e => {
        if (e.checked) {
          num++;
        }
      });
      this.orgNum = num;
    },
    updateEmployeeNum() {
      let num = 0;
      this.employeeList.forEach(e => {
        if (e.checked) {
          num++;
        }
      });
      this.employeeNum = num;
    },
    getWifiAndAddressList() {
      //获取地址和wifi列表,
      http.get(attendance.clockinlist).then(res => {
        console.log(res);
        let list = res.data.list.data || [];
        let wifiList = [];
        let addressList = [];
        list.forEach(e => {
          if (e.wifi_name) {
            wifiList.push(e);
          } else {
            addressList.push(e);
          }
        });
        this.wifiList = wifiList;
        this.addressList = addressList;
      });
    },
    submit() {
      // 提交数据

      let pdata = {}; //提交的数据对象

      //打卡地址
      let attendance_place = JSON.stringify(this.addressSelectedList);

      // 打卡wifi
      let attendance_wifi = JSON.stringify(this.wifiSelectedList);

      // 星期
      let ag_mon = this.dayList[0].shift;
      let ag_tue = this.dayList[1].shift;
      let ag_wed = this.dayList[2].shift;
      let ag_thu = this.dayList[3].shift;
      let ag_fri = this.dayList[4].shift;
      let ag_sat = this.dayList[5].shift;
      let ag_sun = this.dayList[6].shift;

      // 法定节假日
      let legal_holidays = this.legal_holidays;

      // 特殊日期
      let special_days = JSON.stringify(this.special_days);

      let organization_ids = this.organization_ids; //适用的组织id，逗号分割的方式
      let employee_ids = this.employee_ids; //适用的员工id，逗号分割的方式

      // 赋值
      pdata = Object.assign([], this.formItem);
      pdata.attendance_place = attendance_place;
      pdata.attendance_wifi = attendance_wifi;
      pdata.ag_mon = ag_mon;
      pdata.ag_tue = ag_tue;
      pdata.ag_wed = ag_wed;
      pdata.ag_thu = ag_thu;
      pdata.ag_fri = ag_fri;
      pdata.ag_sat = ag_sat;
      pdata.ag_sun = ag_sun;
      pdata.legal_holidays = legal_holidays;
      pdata.special_days = special_days;
      pdata.organization_ids = organization_ids;
      pdata.employee_ids = employee_ids;

      console.log("submit Data", pdata);

      // 提交
      http.post(attendance.attendancegroupcreate, { data: pdata }).then(res => {
        if (res.e == "9999") {
          this.$Message.success("创建成功！");
          this.$router.push("/attendance/work/schedule/group/list");
        } else {
          this.$Message.fail(res.m);
        }
      });
    },

    getDetail(e) {
      // 获取考勤组详情
      http
        .get(attendance.attendancegroupshow, { params: { ag_id: e } })
        .then(res => {
          if (res.e == "9999") {
            console.log(222);
            console.log(res);
            let d = res.data.attendance_group;

            //设置id、name、打卡条件
            let temp_form = {};
            temp_form.ag_id = d.ag_id;
            temp_form.ag_name = d.ag_name;
            temp_form.attendance_condition = d.attendance_condition;
            this.formItem = Object.assign(this.formItem,temp_form);

            // 设置考勤类型
            this.attendanceType.forEach(element => {
              if (element.title == d.ag_type) {
                this.attendanceTypeActiveIndex = element.type;
                return;
              }
            });

            // 设置选中的地址
            let attendance_place = d.attendance_place;
            if (attendance_place) {
              attendance_place = JSON.parse(attendance_place);
              this.addressSelectedList = attendance_place;
              this.addressSelectedTemp = attendance_place;
            }

            // 设置选中的地址
            let attendance_wifi = d.attendance_wifi;
            if (attendance_wifi) {
              attendance_wifi = JSON.parse(attendance_wifi);
              this.wifiSelectedList = attendance_wifi;
              this.wifiSelectedTemp = attendance_wifi;
            }

            // 设置星期
            console.log(d.ag_mon);
            this.dayList[0].shift = d.ag_mon;
            this.dayList[1].shift = d.ag_tue;
            this.dayList[2].shift = d.ag_wed;
            this.dayList[3].shift = d.ag_thu;
            this.dayList[4].shift = d.ag_fri;
            this.dayList[5].shift = d.ag_sat;
            this.dayList[6].shift = d.ag_sun;

            // 设置是否法定节假日
            this.legal_holidays = d.legal_holidays == "true";

            // 设置特殊日期
            if(d.special_days){
              
              this.special_days = JSON.parse(d.special_days);
            }else{
               this.special_days = [];
            }
           

            // 设置已经选择的组织
            if (d.organization_ids) {
              this.getOrgList(d.organization_ids.split(","));
            }

            // 设置已经选择的员工
            if (d.employee_ids) {
              this.getEmployeeList(d.employee_ids.split(","));
            }


          } else {
            this.$Message.fail(res.m);
          }
        });
    }

    //考勤日设置
    // dayChange(item){
    //   console.log(this.dayValue);

    // }
  },
  mounted() {
    this.getOrgList();
    this.getEmployeeList();
    this.getWifiAndAddressList(); //打卡方式列表
    let ag_id = this.$route.query.ag_id; //是否是编辑
    if (ag_id) {
      this.getDetail(ag_id);
    }
  }
};
</script>
<style lang="scss" src="./index.scss">
</style>

